<template>
	<view class="buyInfo">
		<view class="getInfo">
			<view class="" style="color: #007AFF;">
				*请填写您的联系信息，支付定金后，我们的客服将尽快与您联系，确定签约事宜。*
			</view>
			<view class="scale-1px-bottom">
				<input type="text" v-model="pname" placeholder="请输入真实姓名"/>
			</view>
			<view class="scale-1px-bottom">
				<input type="number" v-model="phone"  placeholder="请输入手机号"/>
			</view>
			<view class="getMa">
				<input class="ma" type="number"  v-model="code" maxlength="6" placeholder="请输入短信验证码"/>
				<button type="default" v-if="issend" @click="getCode">{{getCodeText}}</button>
				<button type="default" v-else>{{getCodeText}}</button>
			</view>
		</view>
		<view class="box10">
			<view class="info disFlex" @tap="getnav(router(`selectExpoHall?id=${pid}`))">
				<view class="left">选择展会信息</view>
				<view class="name next">
					{{hallName||'选择展会'}}
				</view>
			</view>
		</view>
		<view class="box10">
			<view class="expoInfo ">
				<view class="imgs">
					<image :src="projectData.cover" mode="" ></image>
				</view>
				<view class="title line2 marginTop20">
					{{projectData.title}}
				</view>
				<view class="priceBox disFlex">
					<view>
						<text class="price">{{projectData.deposit}}</text>
						<text class="word">签约定金</text>
					</view>
					<view>
						<text class="price">{{projectData.cost}}</text>
						<text class="word" style="color: #ccc;">非会员价</text>
					</view>
				</view>
					<view  class="priceBox" style="margin-top: -5rpx;text-align: right;">
						<text style="font-size: 28rpx;" class="price">{{projectData.member_price}}</text>
						<text class="word" style="color: red;">(会员价)</text>
					</view>
				<view class="typelist">
					<view class="labels" v-for="(item,i) in type" :key='i'>
						<view>{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="info" style="height: auto;padding: 20upx 40upx;">
				<view class="left">服务区域</view>
				<view class="" style="display: flex;flex: 1;flex-wrap: wrap;">
					<view class="right" style="margin-left: 0;width: 30%;padding-left: 10upx;" v-for="(item,i) in projectData.citys" :key='i'>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="box10">
			<view class="info">
				<view class="left">展览行业</view>
				<view class="labels">
					<view v-for="(item,i) in projectData.industrys" :key='i'>{{item}}</view>
				</view>
			</view>
		</view>
		
		<view class="bottom"><button @click="payDeposit">支付{{projectData.deposit}}元方案定金</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				projectData:{},
				pname:'',
				phone:'',
				Timer:null,
				hallId:'',
				issend:true,
				getCodeText:'获取验证码',
				code:'',
				hallName:'',
				oldcode:'',
				type: [],
				members:'',
			}
		},
		onLoad(option) {
			this.pid = option.id||uni.getStorageSync('sproject_id');
			this.members = uni.getStorageSync('members');
			this.getinfo();
		},
		onShow(){
			this.hallId =  uni.getStorageSync('hallId');
			this.hallName =  uni.getStorageSync('hallName');
			console.log('ww',this.hallId);
		},
		methods: {
			getCode(){
				let token = uni.getStorageSync('userinfo').token
				let user_id = uni.getStorageSync('userinfo').id
				
				this.http('/api/user/send_code', 'post', {phone:this.phone,type:5,token,user_id}, )
				.then((res) => {
					console.log(res);
					if(res.sta==200){
						this.issend= false;
						this.oldcode=res.data.code
						this.setTimer();
					}
					
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = `60s后重新获取`
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeText = "获取验证码"
						this.issend= true;
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = `${holdTime}s后重新获取`;
					holdTime--;
				},1000)
			},
			getinfo(){
				this.http('/api/project/read', 'post', {id:this.pid}, )
				.then((res) => {
					this.projectData = res.data;
					this.gettype()
				})
			},
			gettype() {
				this.http('/api/project/boothType', 'post', {}, )
					.then((res) => {
						console.log(res)
						res.data.forEach((v) => {
							if (v.id == this.projectData.booth_type) {
								this.type.push(v.name)
							}
						})
						if (this.projectData.open_type == 1) {
							this.type.push('一面开口')
						} else if (this.projectData.open_type == 2) {
							this.type.push('两面开口')
						} else if (this.projectData.open_type == 3) {
							this.type.push('三面开口')
						} else if (this.projectData.open_type == 4) {
							this.type.push('四面开口')
						}
						let a = this.projectData.acreage
						this.type.push(a + 'm²')
					})
			},
			payDeposit(){
				try{
					if(!this.pname){
						throw '请填写姓名'
					}
					if(!this.phone){
						throw '请填写电话'
					}else{
						if (!/^1(1|3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
							throw '请填写正确手机号码！'
							return false;
						}
					}
					if(!this.code){
						throw '请填写验证码'
					}
					if(this.code!=this.oldcode){
						throw '请填写正确的验证码'
					}
					if(!this.hallId){
						throw '选择展会'
					}
				}catch(e){
					uni.showToast({ title: e, icon: 'none' });
					return false;
				}
				uni.showLoading({
					title:'请稍后...'
				})
				let _this=this
				let openid = uni.getStorageSync('userinfo').openid
				this.http('/api/project/buy', 'post', {
					project_id:this.pid,
					code:this.code,
					phone:this.phone,
					name:this.pname,
					openid:openid,
					exhibition_id:this.hallId,
					}, )
				.then((res) => {
					console.log(res);
					if(res.sta==200){
						let orderInfo = res.msg;
						console.log({
							provider: 'wxpay',
							appId:"wx2efe781d736f1f4c",
							timeStamp: orderInfo.time,
							nonceStr:orderInfo.nonce_str,
							package:orderInfo.package,
							signType: 'MD5',
							paySign:orderInfo.sign
						});
						
						uni.requestPayment({
							provider: 'wxpay',
							appId:"wx2efe781d736f1f4c",
							timeStamp: orderInfo.time,
							nonceStr:orderInfo.nonce_str,
							package:orderInfo.package,
							signType: 'MD5',
							paySign:orderInfo.sign, 
							success: (res) => {
								uni.showToast({ title: '支付成功!', icon: 'none' })
								setTimeout(()=>{
									uni.redirectTo({
										url:`/pages/index/pay/paySuccess?ip=myOrder&type=0`
									})
								},1000)
							}, 
							fail: (res) => {
								if(_this.projectData.deposit==0){
										uni.showToast({ title: '支付成功!', icon: 'none' })
										uni.redirectTo({
											url:`/pages/index/pay/paySuccess?ip=myOrder&type=0`
										})
									}else{
									uni.showToast({ title: '支付失败!', icon: 'none' })
									uni.redirectTo({
										url:`/pages/index/pay/payFail?ip=-1`
									})
								}
							}, 
						})
					}else{
						uni.showToast({ title: res.msg, icon: 'none' });
					}
					
				})
			}
		}
	}
</script>

<style lang="less">
	.typelist {
		display: flex;
	
	}
	.buyInfo{
		padding-bottom: 120rpx;
		.getInfo{
			padding: 0 40rpx;
			
			>view{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				input{
					flex: 1;
				}
				.ma{
					position: relative;
					padding-right: 20rpx;
					&::after{
						content: '';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						display: block;
						width:1px;
						height:44rpx;
						background:rgba(229,229,229,1);
					}
				}
				button{
					color: #FE7203;
					border: 0;
					outline: none;
					border-radius: 0;
					background-color: #fff !important;
					margin-left: 20rpx;
				}
			}
		}
	
		.info{
			height: 112rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			.left{
				font-size:32rpx;
				color:rgba(190,201,215,1);
			}
			.right{
				margin-left: 54rpx;
				font-size:32rpx;
				color:rgba(38,38,38,1);
			}
			.name{
				color:rgba(190,201,215,1);
				padding-right: 30rpx;
			}
			.labels{
				display: flex;
				align-items: center;
				margin-left: 54rpx;
				>view{
					text-align: center;
					background:rgba(254,114,3,.1);
					// opacity:0.1;
					border-radius:10rpx;
					color:rgba(254,114,3,1);
					padding: 8rpx;
				}
			}
		}
		.expoInfo{
			padding: 40rpx 40rpx 30rpx 40rpx;
			.imgs{
				display: grid;
				grid-template-columns: repeat(3, 210rpx);
				grid-column-gap: 20rpx;
				// grid-template-rows: repeat(3, 210rpx);
				image{
					width: 100%;
					height: 210rpx;
				}
			}
			.title{
				font-size:40rpx;
				font-weight:bold;
			}
			.priceBox{
				margin-top: 50rpx;
				.price{
					color:#FE7203;
					font-size: 48rpx;
					&::before{
						font-size: 32rpx;
						padding-right: 5rpx;
					}
				}
				.word{
					font-size:24rpx;
					color:rgba(190,201,215,1);
					padding-left: 10rpx;
				}
			}
			.labels{
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				>view{
					text-align: center;
					background:rgba(254,114,3,.1);
					// opacity:0.1;
					border-radius:10rpx;
					color:rgba(254,114,3,1);
					padding: 8rpx;
					margin-right: 18rpx;
					margin-bottom: 15rpx;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height:90rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			button{
				background:rgba(34,145,255,1);
				border-radius:10rpx;
				line-height: 90rpx;
				background:rgba(34,145,255,1) !important;
				border-radius:10rpx ;
				
				color:rgba(255,255,255,1);
				font-size: 32rpx;
			}
		}
	}
</style>
